<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/bootstrap-grid.min.css"/>
    <link rel="stylesheet" href="/css/bootstrap-reboot.min.css"/>
    <style>
        *{margin: 0;padding: 0;}
        .box{
            width: 800px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
<div class="box">
    <a href="/index">返回首页</a>
         <div id="app" style="margin-top: 20px">
            <div style="width: 30%;float: left;height: 100%;"><img :src="'img/'+img+'.jpg'" style="height: auto;width: 100%"/></div>
            <div style="width: 68%;float: left;height: 100%;margin-left: 2%;">
                <h5 class="card-title">{{goodsName}}</h5>
                <p>{{goodsDescribe}}</p>
            </div>
        </div>
</div>
</body>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            goodsName: "",
            goodsDescribe:"",
            img:"noimg"
        },
        methods: {
            getQueryVariable: function (variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return (false);
            },
            getGoodsDetail: function () {
                var that = this;
                var id=that.getQueryVariable('id');
                $.ajax({
                    type: 'get',
                    data: {"id": id},
                    url: "/searchGoodsById.json",
                    success: function (data) {
                        if (data.code == 1) {
                            if (data.data!=null&&data.data!="") {
                                that.img=data.data.goodsNameEn;
                                that.goodsName=data.data.goodsName;
                                that.goodsDescribe=data.data.goodsDescribe;

                            } else {
                                that.good =null;
                                alert("没有搜到你想要的商品！")
                            }
                        } else {
                            alert(data.msg)
                        }
                    }
                })
            }
        },
        created: function () {
            this.getGoodsDetail();
        }
    })
</script>
</html>